<template>
  <div class="personal">
    <!-- 头部 -->
    <header>
      <!-- 导航栏 -->
      <div class="Picon">
        <van-icon style="margin-left: 10px;" name="service-o" size="1.5rem" @click="$router.push('/Customerservice')" />
        <div>
          <van-icon name="list-switch" size="1.5rem" @click="$router.push('/Payment')" />
          <van-icon style="margin: 0 10px;" name="setting-o" size="1.5rem" @click="$router.push('/people')" />
          <van-icon style="margin-right:10px;" name="chat-o" size="1.5rem" @click="$router.push('/chat')" />
        </div>
      </div>
      <!-- 头像 -->
      <div class="headpic">
        <van-image v-if="ifLogined" round width="3rem" height="3rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        <h3 v-if="ifLogined">{{ username }}</h3>
        <h3 @click="$router.push('/login')" v-else>点击登录</h3>
      </div>
    </header>
    <div class="content">
      <!-- 优惠 -->
      <div class="preferential">
        <van-grid :column-num="3" :border="false">
          <van-grid-item v-for="value in icon02" :key="value.id" :icon="value.icon" :text="value.text"
            @click="bbb(value)" />
        </van-grid>
        <!-- <div class="user-dist-icon">
          
        </div> -->
      </div>
      <!-- 订单 -->
      <div class="indent">
        <Myorder></Myorder>
      </div>
      <!-- 我的服务 -->
      <div class="tail">
        <div class="user3">
          <h4>我的服务</h4>
          <div class="user-dist-icon">
            <van-grid :column-num="4" icon-size="24px" :border="false">
              <van-grid-item v-for="value in icon03" :key="value.id" :icon="value.icon" :text="value.text"
                @click="aaa(value)" />
            </van-grid>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Myorder from '@/views/myorder';
export default {
  components: {
    Myorder,
  },
  data() {
    return {
      icon02: [
        { id: 1, icon: "vip-card-o", text: "七鲜超市卡", urlName: 'vipcard' },
        { id: 2, icon: "smile-o", text: "积分兑换", urlName: 'integral' },
        { id: 3, icon: "discount", text: "优惠券", urlName: 'coupon' },
      ],
      icon03: [
        { id: 1, icon: "smile-comment-o", text: "金融福利", urlName: 'finance' },
        { id: 2, icon: "todo-list-o", text: "客户服务", urlName: 'custom' },
        { id: 3, icon: "balance-pay", text: "发票中心", urlName: 'bill' },
        { id: 4, icon: "shop-o", text: "全部门店", urlName: 'salesroom' },
        { id: 5, icon: "goods-collect-o", text: "企业采购", urlName: 'procurement' },
        { id: 6, icon: "logistics", text: "招商合作", urlName: 'investment' },
        { id: 7, icon: "records-o", text: "意见反馈", urlName: 'Feedback' },
        { id: 8, icon: "diamond-o", text: "领货码", urlName: 'Picking' },
        { id: 9, icon: "edit", text: "用户调研", urlName: 'survey' },
        { id: 10, icon: "notes-o", text: "门店证照", urlName: 'licence' },
        { id: 11, icon: "coupon-o", text: "关于我们", urlName: 'AboutUs' },
      ],
      username: "已经登陆",
      ifLogined: false,
    }

  },
  methods: {
    aaa(e) {
      this.$router.push({ name: e.urlName })
    },
    bbb(f) {
      if (f.urlName === 'integral') {
        return false
      }
      this.$router.push({ name: f.urlName })
    },
    login() {

    },

  },
  mounted(){
    // console.log(localStorage.getItem('token'));
       if (this.$store.state.user.token.length>1) {
        this.ifLogined=true
        // console.log(this.ifLogined);
      }else{
        this.ifLogined=false
    }
    console.log(this.ifLogined)
  }
}
</script>


<style lang="scss" scoped>
.personal {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;

  .Picon {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
  }

  .headpic {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .content {
    width: 100%;
    height: 100%;
    margin-left: 5%;

    .preferential {
      width: 90%;
      height: 89px;
      background-color: #fff;
      border-radius: 25px;

      .van-grid {
        width: 300px;
        margin-left: 18px;
      }
    }

    .user-dist-icon {
      width: 334px;

      .van-grid {
        margin: 0 10px;
      }
    }
  }

  .indent {
    width: 90%;
    height: 114px;
    background: #fff;
    border-radius: 25px;
    margin: 10px 0;
  }

  .tail {
    width: 90%;
    height: 288px;
    background: #fff;
    border-radius: 25px;

    .user3 {
      width: 100%;

      h4 {
        font-size: 14px;
        color: #252525;
        padding: 8px 5px;
        border-bottom: 1px solid #898989;
      }
    }
  }
}</style>